<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品刊详情页</title>
    <link rel="stylesheet" href="css/clear.css">
    <link rel="stylesheet" href="css/Journal-details.css">
    <script src="js/formula.js"></script>
</head>
<body>

<div id="div1"></div>
<div id="next" style="text-align: center; font-size: 40px; margin: 40px">下一页</div>
<style>
    #div1 ul li{
        margin: 20px 0;
    }
</style>

<script src="js/jquery-2.1.4.js"></script>

<script>

    var page = 0;
    var count = 10;
    $(function () {
        $("#next").click(getData)
        getData()
    })

    function getData() {
        page ++;
        $.ajax({
            url: "http://192.168.2.37/PHPProject/PHPTest/api/documents?page=" + page + "&category_id=" + getUrlParam("category_id"),
            type: "get",
            dataType: 'jsonp',
            data: {
            },
            jsonp:'callback',
            success: function(result) {
                console.log(result);
                var oUl=document.createElement("ul");
                for (var i = 0; i < result.data.length; i++) {
                    var aLi=document.createElement("li");
                    var oA=document.createElement("a");
                    oA.append(((page - 1) * count + i + 1).toString() + "." + result.data[i].title);
                    $(oA).attr("href","Journal-details.html?&id=" + result.data[i].id);
                    aLi.append(oA);
                    oUl.appendChild(aLi)
                }
                $("#div1").append(oUl)
            },
            error: function(error) {
                console.log(error)
            }
        });
    }

    //获取url中的参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }

    // 调用方法
    console.log(getUrlParam("category_id"));

</script>








</body>
</html>